<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css" media="screen">
	div{
		width: 224px;
		height: 224px;
		margin: 100px auto;
		position: relative;
	}
	div img{
		position: absolute;
		top: 0;
		left: 0;
		transition: all 1s;
	}
	div img:first-child{
		z-index: 1;
		backface-visibility: hidden;/* 不是正面对像屏幕就隐藏 */
	}
	div:hover img{
		transform: rotateY(180deg);
	}
</style>
</head>
<body>
    <div>
    	<img src="images/qian.svg" alt="">
    	<img src="images/hou.svg" alt="">
    </div>
</body>
</html> 